<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">制作对比图</block>
    </cu-custom>
    <view class="quan">
      <view v-for="(item, index) in datas" :key="index">
        <view class="tou u-f-ac u-f-jsb" style="border-bottom: 2upx solid #ddd;" @click="jump" :data-src='"/pagesA/Static_evaluation/Static_evaluation_list_details_page?id="+item.id'>
          <view class="zuo">
            <view class="erl">
              {{item.createTime}}
            </view>
            <view class="jingt">
              静态评估
            </view>
          </view>
          <view class="you">
            <view class="jiaol">
              教练
            </view>
            <view class="shuz">
              {{item.userName}}
            </view>
            <view class="baog">
              报告详情 >
            </view>
          </view>
        </view>
        <scroll-view scroll-x style="width: 100%;">
          <view class="u-f-ac">
            <view class="relative" @click="getImg(item, index, item2, index2)" v-for="(item2, index2) in item.picList" :key="index2" style="padding: 20upx 0 14upx 20upx;">
              <image class="zhaop" :src="item2 ? 'https://jxjsservice.jxfit.cn/file' + item2 : '../../static/11.png'" />
              <!-- <image class="zhaop" :src="item2"></image> -->
              <view v-if="currentIndex['currentIndex'+index] == index+index2+''" class="cuIcon-roundcheckfill close-icon"></view>
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="dibu">
        <view class="tou u-f-ac u-f-jsb" style="color: #ffffff;">
          <view class="zuo" style="font-size: 26upx;font-weight: 555;margin: 20upx;">
            请选择2张照片作为对比照
          </view>
          <view @click="jump" data-src="/pagesA/Static_evaluation/Static_evaluation_list_details_submit"
            class="you" style="font-size: 24upx; margin: 10upx; padding: 10upx 30upx; background: #39BB9E; border-radius: 10upx;">
            确认
          </view>
        </view>
        <view class="dix">
          <view class="fangk">
            <view style="width: 100%;height: 100%;" class="relative u-f-ajc">
              <image :src="imgList1.contrast1 ? 'https://jxjsservice.jxfit.cn/file' + imgList1.contrast1 : '../../static/11.png'" style="width: 100%;height: 100%;" />
              <view class="cuIcon-roundclosefill delete-img" @click="deleteImg(1)" />
            </view>
          </view>
          <view class="vs">
            vs
          </view>
          <view class="fangk">
            <view style="width: 100%;height: 100%;" class="relative u-f-ajc">
              <image :src="imgList2.contrast2 ? 'https://jxjsservice.jxfit.cn/file' + imgList2.contrast2 : '../../static/11.png'" style="width: 100%;height: 100%;" />
              <view class="cuIcon-roundclosefill delete-img" @click="deleteImg(2)" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        datas: [],
        // imgList1: {
        //   contrast1: '../../static/logo.png',
        //   createTime: '2020-11-11',
        // },
        // imgList2: {
        //   contrast2: '../../static/24.png',
        //   createTime: '2020-12-12',
        // },
        imgList1: {
          contrast1: '',
          createTime: '',
        },
        imgList2: {
          contrast2: '',
          createTime: '',
        },
        ind1: '',
        ind2: '',
        currentIndex: {},
        user: {},
      };
    },
    onLoad: function(e) {
        this.user = uni.getStorageSync("phyUser");
        this.getData(this.user.userId);
    },
    methods: {
      async getData(memberId) {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/body/getBodyStaticEvaluationList",
          data: {
            memberId,
          }
        })
        this.datas = datas;
        this.datas.forEach((item, index) => {
          this.$set( this.currentIndex, `currentIndex${index}`, '');
        })
        // this.datas.forEach(item => {
        //   item.picUrls = [];
        //   if (item.front.picUrls.length) {
        //     item.picUrls.push(...item.front.picUrls)
        //   } else if (item.left.picUrls.length) {
        //     item.picUrls.push(...item.left.picUrls)
        //   } else if (item.right.picUrls.length) {
        //     item.picUrls.push(...item.right.picUrls)
        //   } else if (item.back.picUrls.length) {
        //     item.picUrls.push(...item.back.picUrls)
        //   }
        // })
      },
      getImg(item, index, item2, index2) {
        if (!this.imgList1.contrast1) { // 如果图片1 没有值
          this.imgList1.contrast1 = item2
          this.ind1 = index + 1;
          this.imgList1.createTime = item.createTime
          this.currentIndex['currentIndex'+index] = index+index2+'';
        } else if (this.imgList1.contrast1 && this.ind1 == index + 1) { // 如果图片1有值 还是选了同一行的
          this.imgList1.contrast1 = item2
          this.currentIndex['currentIndex'+index] = index+index2+'';
        } else if (!this.imgList2.contrast2 && this.ind1 != index + 1) { // 如果图片2没有值 并且图片1有值
          this.imgList2.contrast2 = item2
          this.ind2 = index + 1;
          this.imgList2.createTime = item.createTime
          this.currentIndex['currentIndex'+index] = index+index2+'';
        } else if (this.imgList2.contrast2 && this.ind2 == index + 1) { // 如果图片2有值 还是选择同一行的
          this.imgList2.contrast2 = item2
          this.currentIndex['currentIndex'+index] = index+index2+'';
        }
        if (this.imgList1.contrast1 && this.imgList2.contrast2 && this.ind1 != index + 1 && this.ind2 != index + 1) {
          uni.showToast({
            title: "已经选择两次过静态评估的照片~",
            icon: "none",
          })
        }
      },
      deleteImg(i) {
        this['imgList' + i]['contrast' + i] = '';
        this['ind' + i] = '';
        this.currentIndex['currentIndex' + (i-1)] = '';
      },

      jump(e) {
        let url = e.currentTarget.dataset.src;
        if (url.indexOf('Static_evaluation_list_details_submit') != -1) {
          if (!this.imgList1.contrast1 && this.imgList2.contrast2) {
            uni.showToast({
              title: "请选择第一张图~"
            })
            return
          } else if (this.imgList1.contrast1 && !this.imgList2.contrast2) {
            uni.showToast({
              title: "请选择第二张图~"
            })
            return
          }

          let item = {
            remark: '',
            imgList: [],
          }
          let obj1 = {
            name: 'Before',
            createTime: this.imgList1.createTime,
            img: this.imgList1.contrast1,
          }
          let obj2 = {
            name: 'Before',
            createTime: this.imgList2.createTime,
            img: this.imgList2.contrast2,
          }
          item.imgList.push(obj1, obj2);
          uni.setStorageSync("item", item)
        }
        uni.navigateTo({
          url
        });
      },
    }
  }
</script>

<style>
  .quan {
    background: #ffffff;
  }

  .tou {
    width: 94%;
    margin: 0 auto;
  }

  .zuo {
    display: flex;
    align-items: center;
  }

  .erl {
    font-size: 26upx;
    font-weight: 555;
  }

  .jingt {
    font-size: 24upx;
    margin: 20upx;
    padding: 6upx 10upx;
    background: #1db0c3;
    color: #ffffff;
  }

  .you {
    display: flex;
    align-items: center;
  }

  .jiaol {
    font-size: 24upx;
    padding: 6upx 10upx;
    background: #d4d4d4;
    color: #9f9e9e;
  }

  .shuz {
    font-size: 24upx;
    color: #9f9e9e;
    margin: 0 20upx;
  }

  .baog {
    font-size: 24upx;
    color: #9f9e9e;
  }

  .zhaop {
    width: 140upx;
    height: 140upx;
  }

  .dibu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #434653;
  }

  .dix {
    display: flex;
    align-items: center;
  }

  .fangk {
    width: 300upx;
    height: 300upx;
    border: 1px dashed #ffffff;
    margin: 20upx;
  }

  .vs {
    color: #ffffff;
    font-size: 30upx;
    font-weight: 555;
  }

  .delete-img {
    position: absolute;
    right: -20rpx;
    top: -20rpx;
    color: white;
    z-index: 1;
    font-size: 40rpx;
  }

  .close-icon {
    position: absolute;
    right: 0;
    bottom: 30rpx;
    color: #39BB9E;
    font-size: 26rpx;
  }
</style>
